<template>
  <!-- 银行显示区域 -->
  <div class="open-account-bank" v-loading="loading">
    <!-- 普通转账银行-->
    <ui-tabs v-model="payeeBank" type="card" @tab-click="bankHandleClick">
      <ui-tab-pane label="热门银行" name="1">
        <div class="bank-detail">
          <span v-for="(item, index) in SuperBankList" :key="index" class="list-name">
            <span class="img-box" @click="imgValue(item.alt)">
              <img :src="require(`@/assets/image/bankInfo/${item.url}`)" :alt="item.alt" />
            </span>
          </span>
        </div>
      </ui-tab-pane>
      <ui-tab-pane v-for="(item, index) in letterList" :label="item" :key="`${item}${index}`" :name="item"> </ui-tab-pane>
      <ui-tab-pane label="关键字查询" name="2">
        <ui-form ref="keyWord" :rules="rules" :model="form" inline label-width="110px">
          <ui-form-item prop="keyWord" label="关键字：">
            <ui-input v-model="form.keyWord" placeholder="请输入"></ui-input>
          </ui-form-item>
          <ui-form-item>
            <ui-button class="primary-btn" @click="searchList()">查询</ui-button>
            <ui-button class="default-btn" @click="reset()">重置</ui-button>
          </ui-form-item>
        </ui-form>
        <ui-table :data="tableData" :header-cell-style="{ background: '#f4f6f5', color: '#000000' }" highlight-current-row>
          <ui-table-column label="选择" width="100px" align="center">
            <template slot-scope="scope">
              <div class="circle">
                <input v-model="radio" type="radio" :id="'bank' + scope.$index" :value="scope.$index" @click="imgValue(scope.row.BankName)" />
              </div>
            </template>
          </ui-table-column>
          <ui-table-column label="银行名称" prop="BankName"> </ui-table-column>
          <ui-table-column label="银行行号" prop="BankId"> </ui-table-column>
        </ui-table>
      </ui-tab-pane>
      <!-- 按照 A-Z 字母显示时的内容 start -->
      <vx-nodata :list="otherBank" v-if="['1', '2'].indexOf(payeeBank) == '-1'" subTitle=" ">
        <div class="other-bank-wrap">
          <div class="other-bank" v-for="(item, index) in otherBank" :key="index">
            <p>{{ item.code }}</p>
            <ul>
              <li v-for="(bank, index) in item.list" :key="index" @click="imgValue(bank.BankName)">
                {{ bank.BankName }}
              </li>
            </ul>
          </div>
        </div>
      </vx-nodata>
      <!-- 按照 A-Z 字母显示时的内容 end -->
    </ui-tabs>
  </div>
</template>

<script>
import { pinyin } from '@csii/vx-util';
import transferRemitApi from '@/api/transferRemit';

export default {
  name: 'bankDeposit',
  data() {
    return {
      loading: false,
      payeeBank: '1', // tab标签
      form: {
        keyWord: '',
      },
      radio: '', // 关键字查询标签内，选中银行
      otherBank: [], // 显示银行
      SuperBankList: [], // 超网银行
      tableData: [], // 关键字查询列表
      rules: {
        keyWord: [{ required: true, message: '请输入关键字', trigger: 'change' }],
      },
      letterList: ['ABCDEF', 'GHJ', 'KLMN', 'PQRST', 'WXZ'], // 标签列表
      flag: false, // 判断是否是首次加载
    };
  },
  created() {
    this.PRBankListQryAxios();
  },
  methods: {
    // 关键字查询下的查询
    searchList() {
      this.$refs['keyWord'].validate((valid) => {
        if (valid) {
          // 执行 筛选 操作
          let result = this.tableData.filter((res) => {
            if (res.BankName.includes(this.form.keyWord) || res.BankId.includes(this.form.keyWord) ) return res;
          });
          this.tableData = result;
        }
      });
    },
    // 关键字查询 重置
    reset() {
      this.$refs['keyWord'].resetFields();
      this.tableData = this.SuperBankList;
    },
    // 切换银行
    CutoverBank() {
      this.$emit('CutoverBank', { flag: true });
    },
    // 关闭超网窗口
    closechoosebank() {
      this.$emit('endSuperBankWay', false);
    },
    // 银行查询
    async PRBankListQryAxios() {
      try {
        this.loading = true;
        let result = await transferRemitApi.getOpenAccountBankList();
        this.SuperBankList = result.tableData;
        this.tableData = result.tableData;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.loading = false;
      }
    },
    // 切换选项卡
    bankHandleClick(tab) {
      this.passWordSplitBank(tab.name.split(''));
    },
    // 根据首字母分隔银行
    passWordSplitBank(array, flag) {
      this.flag = flag == 'tabFlag';
      this.otherBank = [];
      let bankNUm = 0;
      for (var i = 0; i < array.length; i++) {
        var bank = {
          code: array[i],
          list: [],
        };
        // 根据 pinyin 筛选条件 返回 列表值
        bank.list = pinyin.filter(this.SuperBankList, 'BankName', array[i]);
        // 判断查询数据总条数
        bankNUm = bankNUm + bank.list.length;
        this.otherBank.push(bank);
      }
      return bankNUm;
    },
    // 回调函数
    imgValue(e) {
      var num = 0;
      var checkBankName = e;
      this.SuperBankList.filter((item) => {
        if (item.BankName.includes(checkBankName)) {
          this.$emit('SuperBankWay', item);
        } else {
          num++;
        }
        if (num === this.SuperBankList.length) {
          this.$message({
            type: 'error',
            message: '此银行不支持超级网银',
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.open-account-bank {
  width: 100%;
  min-width: 550px;
  height: 460px;
  box-shadow: 4px #000000;
  margin: 0 auto;
  background: $color-bg-default;

  .bank-detail {
    overflow-y: auto;
    max-height: 390px;
    .list-name {
      display: inline-block;
      margin-bottom: 10px;
      width: 25%;
      .img-box {
        display: inline-block;
        cursor: pointer;
        display: inline-block;
        padding: 6px 15px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
        &:hover {
          background: #f1f1f1;
        }
      }
    }
  }

  .ui-table {
    overflow-y: auto;
    max-height: 320px;
  }

  .other-bank-wrap {
    overflow-y: auto;
    max-height: 390px;
  }
  // 按字母分类
  .other-bank {
    width: 100%;
    display: flex;
    justify-content: space-around;
    p {
      font-size: $s16;
      font-weight: 500;
      color: $color-text-hover;
      display: inline-block;
      flex: none;
      padding: 3px 0;
    }
    ul {
      display: inline-block;
      flex: auto;
      margin-left: 15px;
      font-size: $s16;
      li {
        cursor: pointer;
        float: left;
        margin: 0 15px 15px 0;
        &:hover {
          color: $color-primary;
        }
      }
    }
  }

  .circle {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    input[type='radio'] {
      /*去除浏览器默认样式*/
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 14px;
      height: 15px;
      outline: none;
      cursor: pointer;
      background: url('~@/assets/image/transferRemit/garyCircle.png') no-repeat;
      background-size: contain;
    }
    input[type='radio']:checked:after {
      content: '';
      width: 14px;
      height: 15px;
      display: block;
      margin: auto;
      background: url('~@/assets/image/common/radio.png') no-repeat;
      background-size: contain;
    }
  }
}
</style>
